<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./lib/echarts.min.js"></script>
		<script src="./lib/jquery.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px"></div>

		<script type="text/javascript">
			let airData = [
				{ name: '北京', value: 39.92 },
				{ name: '天津', value: 39.13 },
				{ name: '上海', value: 31.22 },
				{ name: '重庆', value: 66 },
				{ name: '河北', value: 147 },
				{ name: '河南', value: 113 },
				{ name: '云南', value: 25.04 },
				{ name: '辽宁', value: 50 },
				{ name: '黑龙江', value: 114 },
				{ name: '湖南', value: 175 },
				{ name: '安徽', value: 117 },
				{ name: '山东', value: 92 },
				{ name: '新疆', value: 84 },
				{ name: '江苏', value: 67 },
				{ name: '浙江', value: 84 },
				{ name: '江西', value: 96 },
				{ name: '湖北', value: 273 },
				{ name: '广西', value: 59 },
				{ name: '甘肃', value: 99 },
				{ name: '山西', value: 39 },
				{ name: '内蒙古', value: 58 },
				{ name: '陕西', value: 61 },
				{ name: '吉林', value: 51 },
				{ name: '福建', value: 29 },
				{ name: '贵州', value: 71 },
				{ name: '广东', value: 38 },
				{ name: '青海', value: 57 },
				{ name: '西藏', value: 24 },
				{ name: '四川', value: 58 },
				{ name: '宁夏', value: 52 },
				{ name: '海南', value: 54 },
				{ name: '台湾', value: 88 },
				{ name: '香港', value: 66 },
				{ name: '澳门', value: 77 },
				{ name: '南海诸岛', value: 55 },
			];
			let mCharts = echarts.init(document.querySelector('div'));
			$.get('./json/map/china.json', function (ret) {
				// ret 中国各个省份的矢量地图数据
				console.log(ret);
				echarts.registerMap('chinaMap', ret);
				let option = {
					geo: {
						type: 'map',
						map: 'chinaMap',
						roam: true, //允许拖动和缩放
						label: {
							show: true, //展示标签
						},
					},
					series: [
						{
							data: airData,
							geoIndex: 0, //空气质量数据和第一个地图关联在一起
							type: 'map',
						},
					],
					visualMap: {
						min: 0,
						max: 300,
						inRange: {
							color: ['white', 'red'], //控制颜色变化范围
						},
						calculable: true, //显示控制滑块
					},
				};
				mCharts.setOption(option);
			});
		</script>
	</body>
</html>
